<template>
  <!-- <main class="main-content"> -->
    <!-- 主体内容 -->
    <div class="container">
        <div class="main-content">
            <!-- 左侧面板 -->
            <div class="left-panel">
                <div  class="panel-section">
                    <div class="welcome-bar">
                        <div v-if="!isLogin" class="welcome-text">
                            <h3>Welcome to Letbetter!</h3>
                            <p>客户登陆</p>
                        </div>
                        <div v-else class="welcome-text">
                            <h3>欢迎登录到 Letbetter！</h3>
                        </div>
                        <div class="date-box">
                            <div class="day">{{toDay.getDate()}}</div>
                            <div class="date-text">
                                {{ toDay.toLocaleDateString()}}
                            </div>
                            <div class="date-text">{{getWeekday()}}</div>
                        </div>
                    </div>
                    <el-form v-if="!isLogin" ref="form" :model="form" :rules="rules" label-width="100px">
                    <div class="form-group">
                        <label for="user-type">用户身份</label>
                        <select id="user-type" class="form-control" v-model="form.roleId">
                            <option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="username">用户名称</label>
                        <input type="text" v-model="form.username" id="username" class="form-control" placeholder="请输入用户名">
                    </div>
                    
                    <div class="form-group">
                        <label for="password">登录密码</label>
                        <input type="password" v-model="form.password" id="password" class="form-control" placeholder="请输入密码">
                    </div>
                    
                    <button class="btn" @click="submitForm()">登陆</button>
                </el-form>
                </div>
                
                <div class="panel-section">
                   
                </div>
                
                <div class="panel-section">
                    <h3 class="section-title">在线咨询</h3>
                    <div class="contact-info">
                        <p>请扫描二维码添加我们的客服微信或拨打客服热线</p>
                        <div style="text-align: center; margin-top: 15px;">
                            <div style="background: #e9ecef; border-radius: 8px; display: inline-block; padding: 15px;">
                                <img src="../assets/images/wxzx.jpg" alt="微信二维码" style="width: 145px; height: 110px;">
                                <p style="margin-top: 10px;">扫一扫关注微信</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="panel-section">
                    <h3 class="section-title">莱比特优势项目</h3>
                    <ul class="footer-links-left">
                        <li><a href="#"><i class="fas fa-check-circle" style="color: #941C1B;"></i> 国内货物物流配送</a></li>
                        <li><a href="#"><i class="fas fa-check-circle" style="color: #941C1B;"></i> 国际货运代理</a></li>
                        <li><a href="#"><i class="fas fa-check-circle" style="color: #941C1B;"></i> 仓储一体化服务</a></li>
                        <li><a href="#"><i class="fas fa-check-circle" style="color: #941C1B;"></i> 供应链解决方案</a></li>
                    </ul>
                </div>
            </div>
            
            <!-- 中间面板 -->
            <div class="center-panel">
                <div class="company-intro">
                    <h3>公司介绍</h3>
                    <div class="intro-text">
                        <p><strong>"莱比特"</strong>音译于"Letbetter"，寓意"追求更好，做到更好"，公司成立之初就将更快、更强、更高的奥运精神作为公司的发展动力，公司定位"专业的第三方物流服务供应商"，提出"以专业化的服务和产品满足客户个性化的需求"的全新服务理念。</p>
                        <p>公司充分认识到只有人才才能让公司长足发展，"长足"是一家提供"快、平、好、省、绿色"运输服务的企业。</p>
                    </div>
                    
                    <div class="features">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <i class="fas fa-box"></i>
                            </div>
                            <h4 class="feature-title">货物配载</h4>
                            <p class="feature-text">智能配载系统，最大化利用运输资源</p>
                        </div>
                        
                        <div class="feature-card">
                            <div class="feature-icon">
                                <i class="fas fa-truck"></i>
                            </div>
                            <h4 class="feature-title">全国配送</h4>
                            <p class="feature-text">覆盖全国1000+城市的物流网络</p>
                        </div>
                        
                        <div class="feature-card">
                            <div class="feature-icon">
                                <i class="fas fa-warehouse"></i>
                            </div>
                            <h4 class="feature-title">仓储服务</h4>
                            <p class="feature-text">智能化仓储管理解决方案</p>
                        </div>
                    </div>
                </div>
                
                <div class="panel-section" id="scrollBox" style="overflow-y: auto;">
                    <!-- <h3 class="section-title">公司新闻</h3>
                    <ul class="news-list" ref="listRef">
                        <li v-for="item in items" :key="item.id">
                            <span class="news-date">{{ item.time }}</span>
                            <span class="news-title">{{ item.title }}</span>
                        </li>
                    </ul> -->
                    <!-- <Vue3SeamlessScroll :data="items" :class-option="{ step: 1 }">
                    <ul><li v-for="item in items" :key="item.time">
                          <span class="news-date">{{ item.time }}</span>
                          <span class="news-title">{{ item.title }}</span>
                    </li>
                    </ul>
                    </Vue3SeamlessScroll> -->
                </div>
                
                <div class="highlight-box">
                    <h4 class="highlight-title">公司理念</h4>
                    <p>创新、服务、共赢。为客户提供安全、高效、低成本的物流解决方案。</p>
                </div>
            </div>
            
            <!-- 右侧面板 -->
            <div class="right-panel">
                <div class="panel-section branch-card">
                    <h3 class="section-title">分公司信息</h3>
                    
                    <div class="branch-item">
                        <div class="branch-name">公司在各主要城市建有服务网络</div>
                        <div class="contact-info">
深圳、武汉、上海、杭州、南京、成都、重庆、昆明、贵阳、南宁、 郑州、长沙、 南昌、 福州、西安、海南等。
                        </div>
                    </div>
                    
                    <div class="branch-item">
                        <div class="branch-name"></div>
                        <div class="contact-info">
                           同时各区域物流系统建立了良好、优质的服务网络，以提升服务品质，快速解决物流方案，为客户提供优质的物流服务体验
                        </div>
                    </div>
                   
                </div>
                
                <div class="panel-section">
                    <h3 class="section-title">总公司总部</h3>
                    <div class="contact-info">
                        <p><i class="fas fa-user-group"></i> 公司名称：广州莱比特物流服务有限公司</p>
                        <p><i class="fas fa-map-marker-alt"></i> 联系地址：广州市天河区黄村大道2号后座501-506房</p>
                        <p><i class="fas fa-phone"></i> 电话：020-82520288</p>
                        <p><i class="fas fa-fax"></i> 传真：020-82025757</p>
                        <p><i class="fas fa-envelope"></i> 邮箱：lbtslzx@163.com</p>
                        <p><i class="fas fa-clock"></i> 工作时间：8:30-17:30（周一至周五）</p>
                    </div>
                </div>
                
                <div class="panel-section">
                    <h3 class="section-title">微信推广</h3>
                    <div style="text-align: center; margin-top: 15px;">
                        <div style="background: #e9ecef; border-radius: 8px; display: inline-block; padding: 15px;">
                            <img src="../assets/images/wxtui.jpg" alt="qrcode" width="150" height="150"/>
                            <p style="margin-top: 10px;">扫码关注莱比特官方微信</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <!-- </main> -->
</template>

<script>
import {login} from '@/api/login';
import { setToken, setExpiresIn,getToken } from '@/utils/auth'
// import { fisherYatesShuffle } from '@/utils/shuffle';
export default {
  name: 'MainContent',
//   components: { Vue3SeamlessScroll },
  data() {
    return {
      isLogin: false,
      toDay: new Date(),
      toMonth: '',
      toYear: '',
      items: [
        // { time: '2020/2/25', title: '莱比特已开始复工，全面加强防疫措施' },
        // { time: '2018/3/12', title: '莱比特合作伙伴行为守则正式发布' },
        // { time: '2017/1/3', title: '消防安全演习及其他活动圆满完成' },
        // { time: '2017/1/3', title: '2017我们在前进的道路上不懈努力' },
        // { time: '2016/7/22', title: '莱比特物流办公室搬迁公告' },
        // { time: '2016/2/17', title: '莱比特2015年度总结大会暨员工年终奖大会圆满举行' },
      ],
      typeList:[
        { id:1,label: "vip", name: 'VIP客户' },
        { id: 2,label: "partner", name: '合作伙伴' },
        { id: 3, label: "employee", name: '员工' }
      ],
      form:{

      },
      rules: {
        userType: [
          { required: true, message: '请选择用户身份', trigger: 'change' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 20, message: '用户名长度在 5 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
   },
  created() {
     this.isLogin = getToken() ? true : false;
  },
  methods:{
    autoScroll() {
        setInterval(() => {
            // console.log('滚动了')
        //    this.items = fisherYatesShuffle(this.items)
           if ( this.items.length  > 0) { 
            // 移除最后一个元素 
            const lastItem = this.items.pop();  
            // 将最后一个元素添加到数组开头 
            this.items.unshift(lastItem);  
           }
        }, 3000);
    },
     //获取当天日期
        getTodayDate() {
            const today = new Date();
            this.toYear = today.getFullYear();
            this.toMonth = today.getMonth() + 1;  // 月份从0开始，所以要加1
            this.toDay = today.getDate();
            // this.toDay = (month < 10 ? '0' + month : month);
            // let curDate = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day)
            // this.queryParams.startTime = curDate + ' 00:00:01';
            // this.queryParams.endTime = curDate + ' 23:59:59';
        },
    // 获取当前星期几 (中文形式)
    getWeekday() {
      const daysOfWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      const today = new Date();
      return daysOfWeek[today.getDay()];  // 返回如 "星期三"
    },    
    submitForm() {
        console.log('表单提交',this.form);
        this.form.source = 'website';
        login(this.form).then(response => {
            // console.log('返回数据：',response);
            setToken(response.data.token);
            setExpiresIn(response.data.expireTime); // 设置过期时间
            this.isLogin = true;
            setTimeout(() => {
                // 假设我们将登录状态存储在 Vuex 或组件的状态中
                 // Vuex 中的 mutation 示例
                // this.$store.commit('setLoginStatus', true); 
                // 刷新页面或者更新状态
                window.location.reload();
            }, 1000);
        }).catch(error => {
            console.error(' 登录出错:', error);
        });
  },
  mounted() {
      this.autoScroll();
  }
  }
}
</script>
<style scoped>
	@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
</style>
<style scoped src="../assets/css/common.css"></style>
